/**
* 图表界面
*/
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-select size="small" v-model="formInline.hostlist" placeholder="请选择主机">
          <el-option v-for="type in hostlist" :label="type.host_name_ip" :value="type.host_ip"
                     :key="type.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--    <el-row :gutter="23">-->
    <!--      <el-col :span="18">-->
    <!--        <div class="stbgc">-->
    <!--          <el-row :gutter="23">-->
    <!--            <el-col :span="7">-->
    <!--              <el-input size="small" v-model="machineNo" placeholder="请输入所属公司"></el-input>-->
    <!--            </el-col>-->
    <!--            <el-col :span="7">-->
    <!--              <el-input size="small" v-model="machineNo" placeholder="请输入资产编号"></el-input>-->
    <!--            </el-col>-->
    <!--            <el-col :span="7">-->
    <!--              <el-input size="small" v-model="machineNo" placeholder="请输入"></el-input>-->
    <!--            </el-col>-->
    <!--            <el-col :span="3" class="stsearch">-->
    <!--              <el-button size="small" type="primary">搜索</el-button>-->
    <!--            </el-col>-->
    <!--          </el-row>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :span="6">-->
    <!--        <div class="stbgc">-->
    <!--          <el-row>-->
    <!--            <el-col :span="8" class="text-c">-->
    <!--              <el-radio v-model="type" label="day">日</el-radio>-->
    <!--            </el-col>-->
    <!--            <el-col :span="8" class="text-c">-->
    <!--              <el-radio v-model="type" label="month">月</el-radio>-->
    <!--            </el-col>-->
    <!--            <el-col :span="8" class="text-c">-->
    <!--              <el-radio v-model="type" label="years">年</el-radio>-->
    <!--            </el-col>-->
    <!--          </el-row>-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="ClickEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="24">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
import {HostTagSourcesNum, influxList} from "../../api/payMG";
import {devHostList} from "../../api/devMG";

export default {
  name: "welcome",
  data() {
    return {
      formInline: {
        hostlist: '',
        token: localStorage.getItem('logintoken')
      },
      hostlist: [
        {host_ip: '请选择', id: 0},
        {host_ip: '已处理', id: 1},
        {host_ip: '未处理', id: 2},
      ],
      machineNo: '',
      type: 'day',
      //  CPU使用率(%)
      SCEoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: 'RAM使用率',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: 'RAM使用率',
          // type: 'bar',
          type: 'line',
          barGap: 0,
          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ]
              )
            },
            emphasis: {
              color: new Chart.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#2378f7'},
                  {offset: 0.7, color: '#2378f7'},
                  {offset: 1, color: '#83bff6'}
                ]
              )
            }
          }
        }]
      },
      //  带宽发送使用量(Mbps)
      SUMoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '带宽发送使用量',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '带宽发送使用量',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      //  内存使用率(%)
      Clickoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '内存使用率',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '内存使用率',
          // type: 'bar',
          type: 'line',
          barGap: 0,
          data: [50000, 10000, 80000, 30000, 50000, 60000, 40000, 80000, 50000, 20000, 60000, 40000],
          barWidth: 10,
          itemStyle: {
            color: "#48cefd"
          }
        }]
      },
      //  服务器源数量
      payoption: {
        backgroundColor: '#2c343c',
        title: {
          text: '券商机器统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '服务器源数量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {value: 335, name: '支付宝'},
              {value: 310, name: '银商二维码'},
              {value: 274, name: '会员'},
              {value: 235, name: '微信支付'},
              {value: 100, name: 'Pos通'}
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      payNumoption: {
        backgroundColor: '#2c343c',
        title: {
          text: '服务器源数量',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '机器版本统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {value: 335, name: '支付宝'},
              {value: 310, name: '银商二维码'},
              {value: 274, name: '会员'},
              {value: 235, name: '微信支付'},
              {value: 100, name: 'Pos通'}
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      chart:null,
      chart1:null,
      chart2:null,
      chart3:null,
      chart4:null,
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.getdata(this.formInline)

  },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getTagSourcesNum()
    // this.getSCE()

    this.getSCE()

    this.getSUM()
    this.getClick()
    this.getpay()
    this.getpayNum()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 获取主机数据
    getdata(parameter) {
      devHostList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.hostlist = res.data
          }
        })

      influxList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.SCEoption.xAxis.data = res.time_list
            this.SCEoption.series[0].data = res.ram_list
            // this.chart.setOption(this.SCEoption)
          }
        })
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    // 交易总笔数
    getSCE() {
      influxList(this.formInline)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.SCEoption.xAxis.data = res.time_list
            this.SCEoption.series[0].data = res.ram_list
            // this.chart.setOption(this.SCEoption)
            this.chart = Chart.init(this.$refs.SCEchart)
            this.chart.setOption(this.SCEoption)
          }
        })

    },
    // 交易总金额
    getSUM() {
      this.chart1 = Chart.init(this.$refs.SUMEchart)
      this.chart1.setOption(this.SUMoption)
    },
    // 总点击量
    getClick() {
      this.chart2 = Chart.init(this.$refs.ClickEchart)
      this.chart2.setOption(this.Clickoption)
    },
    // 支付方式统计
    getpay() {
      this.chart3 = Chart.init(this.$refs.payEchart)
      this.chart3.setOption(this.payoption)
    },
    // 支付方式统计
    getpayNum() {
      this.chart4 = Chart.init(this.$refs.payNumEchart)
      this.chart4.setOption(this.payNumoption)
    },
    getTagSourcesNum() {
      HostTagSourcesNum().then(res => {
        this.payoption.series[0].data = res.data.tag
        this.chart3.setOption(this.payoption)
        this.payNumoption.series[0].data = res.data.source
        this.chart4.setOption(this.payNumoption)
      })
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}

.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
